<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 导入jquery核心类库 -->
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<!-- 导入easyui类库 -->
<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
<script src="../js/easyui/locale/easyui-lang-zh_CN.js"
	type="text/javascript"></script>
<link rel="stylesheet" type="text/css"
	href="../js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
	href="../js/easyui/themes/icon.css">
<script type="text/javascript">
$(function() {
	$('#grid').datagrid({
		url : 'datagrid_data.json',
		columns : [ [ {
			field : 'id',
			title : 'Id',
			width : 100
		}, {
			field : 'name',
			title : 'Name',
			width : 100,
			//设置可编辑组件
			editor:{
				type:"validatebox",//EasyUI的form组件的名字
				options:{//上面组件的属性
					required:true
				}
			}
		}, {
			field : 'price',
			title : 'Price',
			width : 100,
			align : 'right',
			//设置可编辑组件
			editor:{
				type:"datebox",//EasyUI的form组件的名字
				options:{//上面组件的属性
					required:true
				}
			}
		} ] ],
		toolbar : [ {
			text : '打开编辑',
			handler : function() {
				//alert('edit')
				//获取选中的行
				var row=$("#grid").datagrid("getSelected");
				//获取行的索引
				var index=$("#grid").datagrid("getRowIndex",row);
				//根据索引打开编辑某行
				$("#grid").datagrid("beginEdit",index);
			}
		}, {
			text : '结束编辑',
			handler : function() {
				//获取选中的行
				var row=$("#grid").datagrid("getSelected");
				//获取行的索引
				var index=$("#grid").datagrid("getRowIndex",row);
				//根据索引打开编辑某行
				$("#grid").datagrid("endEdit",index);
			}
		}, {
			text : '取消编辑',
			handler : function() {
				//获取选中的行
				var row=$("#grid").datagrid("getSelected");
				//获取行的索引
				var index=$("#grid").datagrid("getRowIndex",row);
				//根据索引打开编辑某行
				$("#grid").datagrid("cancelEdit",index);
			}
		}

		]
		//参数1：行的索引
		//参数2：一行的数据（最终数据：包含改变了的和没改变的）
		//参数3：改变的数据(只包含改变了的)
		,onAfterEdit:function(rowIndex, rowData, changes){
			//alert("结束编辑了！");
			console.log(rowData);
			console.log(changes);
		}

	});

});

</script>
</head>
<body>
	<table id="grid"></table>
</body>
</html>